<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>儿童节快乐！祝你每天开心~</title>

<link rel="stylesheet" href="css/style.css">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/PerfectLoad.js"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<style>
*{margin:0; padding:0; border:0;}
*:focus{outline:none;}
html{ overflow-x:hidden;}
body {margin:0; padding:0; border:0;} 
.demo img{width:100%}
</style>
<script type="text/javascript">
function MM_effectShake(targetElement)
{
	Spry.Effect.DoShake(targetElement);
}
var bgaudiocount = 0;
        function bgaudio(){       
            ++bgaudiocount;
            if(bgaudiocount % 2 == 1){   
                document.getElementById("bgaudio").play();      
            }else{
                document.getElementById("bgaudio").pause();
            }
          
        }
</script>
</head>
<body onclick="bgaudio()">
	

<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<center><img src="images/马.png" width="400px" height="400px" style="margin-left: -20%; margin-top: 45%; float: initial; position: fixed;" onclick="MM_effectShake(this)"> 
</center>
<div class="mobile">最大化查看</div>
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<h1>Happy everday!</h1>

<h2>儿童节快乐呀！ 小朋友!</h2>
<br><br>
<span> 🎉 </span>
<audio src="yin.mp3" id="bgaudio"></audio>
<canvas  id="c" style="width: 100%; height: 100%; z-index: 9999; margin-top: -120px;" onclick="clieckBtn() play2()"></canvas>
    <script>
        window.onload = function (argument) {

            // var lyric = "i couldn't take it couldn't stand another minute couldn't bear another day without you in it";
            var lyric = "节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐  大方 大方  美丽 美丽  小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 开心 开心 开心 开心 fun fun 人缘超好 人缘超好 人缘超好 fun fun fun fun  happy happy happy  beautiful beautiful 迪士尼小公主 迪士尼小公主 迪士尼小公主 迪士尼小公主 大方 大方 热爱生活 热爱生活 聪明伶俐 聪明伶俐 18岁 18岁  爱喝奶茶 爱喝奶茶 哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈哈哈 人见人爱 人见人爱 人见人爱 暴富 暴富 暴富 甜甜的女孩 甜甜的女孩 甜甜的女孩 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐  大方 大方  美丽 美丽  小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友 小盆友  fun fun fun fun fun fun  happy happy happy  beautiful beautiful 天天开心 天天开心 天天开心 18岁 18岁  爱喝奶茶 爱喝奶茶  哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈哈哈 甜甜的女孩 甜甜的女孩 超爱笑 超爱笑"
            
			var words = {};
            var words_attr = [];
            string_handle(lyric);

            var canvas = document.getElementById('c');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            if (canvas.getContext) {
                var c = canvas.getContext('2d'),
                w = canvas.width,
                h = canvas.height;

                c.strokeStyle = 'red';
                c.fillStyle = 'white';
                c.lineWidth = 5;

                // constructor
                Word = function (key) {
                    this.text = key;
                    this.x = Math.random() * w;
                    this.y = Math.random() * h;
                    this.font = words[key] * 10 + 'px arial';
                    this.speed = words[key];
                };
                for (key in words) {
                    words_attr.push(new Word(key));
                }
                console.log(words_attr.length);

                function animation() {
                    for (var i = 0; i < words_attr.length; i++) {
                        c.font = words_attr[i].font;
                        c.fillText(words_attr[i].text, words_attr[i].x, words_attr[i].y);
                        words_attr[i].width = c.measureText(words_attr[i].text).width;
                        c.stroke();
                    }
                    move();
                }

                function move() {
                    for (var i = 0; i < words_attr.length; i++) {
                        if (words_attr[i].x > w) {
                            words_attr[i].x = -words_attr[i].width;
                            words_attr[i].y = Math.random() * h;
                        } else {
                            words_attr[i].x += words_attr[i].speed;
                        }
                    }
                }

                setInterval(function () {
                    c.clearRect(0, 0, w, h);
                    animation();
                }, 24);

            }

            function string_handle(str) {
                var split_str = str.split(" ");
                var word_array = [];
                var word_count = [];
                for (var i = 0; i < split_str.length; i++) {
                    check = true;
                    for (var j = 0; j <= word_array.length; j++) {
                        if (split_str[i] == word_array[j]) {
                            word_count[j]++;
                            check = false;
                            break;
                        }
                    }
                    if (check) {
                        word_array.push(split_str[i]);
                        word_count.push(1);
                    }
                }
                for (var i = 0; i < word_array.length; i++) {
                    words[word_array[i]] = word_count[i];
                }
                return words;
            }

        };
    </script>


</body>
</html>